* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

#root {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  position: relative;

  & div {
    width: 0;
    height: 0;
    position: absolute;
  }

  & div:nth-child(1) {
    border-left: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid red;
    left: 0;
    top: 50px;
  }

  & div:nth-child(2) {
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-bottom: 50px solid red;
    left: 99px;
    top: 0;
  }

  & div:nth-child(3) {
    border-bottom: 50px solid transparent;
    border-right: 50px solid red;
    border-top: 50px solid red;
    bottom: 1px;
    left: 50px;
  }

  & div:nth-child(4) {
    border-right: 50px solid transparent;
    border-top: 50px solid red;
    border-left: 50px solid red;
    bottom: 51px;
    right: 1px;
  }


}
